<template>
	<view class="pb-30">
		<image class="fixed top-0 index--1" style="width: 750rpx; height: 634rpx" src="/static/index-bg.png"></image>
		<uv-navbar :fixed="false" bgColor="transparent" :leftIcon="undefined" leftText="首页"></uv-navbar>
		<!-- 用户信息 -->
		<view class="staff-info-wrap flex--center radius-20 relative mt-20"
			@click="$util.navTo('/pages/user/userinfo')">
			<image class="staff-info-bg absolute inset-0 w-full h-full index--1" src="/static/info-bg.png"></image>
			<view class="flex-1">
				<image style="width: 187rpx; height: 33rpx" src="/static/welcome.png"></image>
				<view class="fs-30 fw-500 color-primary" style="margin-top: 20rpx">你好，欢迎来到工作台！</view>
			</view>

			<image class="staff-avatar radius-999"
				:src="staffInfos.avatar ? $util.addDomain(staffInfos.avatar) : '/static/default-avatar.png'"></image>
		</view>
		<!-- 扫码 -->
		<view class="scan-wrap flex--center bg-f radius-20">
			<view class="flex-1">
				<view class="fs-34 fw-700">扫码完成</view>
				<view class="fs-24" style="margin-top: 28rpx">
					<text class="color-9">扫码识别订单，确认工序完成！</text>
					<text style="color: #ff6950" @click="handleScan">立即扫码>></text>
				</view>
			</view>
			<image class="staff-icon" src="/static/staff.png"></image>
		</view>
		<!-- 悬浮扫码 -->
		<view class="fixed-scan index-1 flex-column flex-center-center color-f fs-24" @click="handleScan">
			<image class="scan-icon mb-10" src="/static/scan.png"></image>
			<view>扫码完成</view>
		</view>
		<view class="status-tab-wrap bg-f">
			<view class="tab-wrap uv-tabs-fs-28">
				<uv-tabs inactiveStyle="color: #666" activeStyle="color: #141414" lineWidth="55rpx" lineHeight="6rpx"
					lineColor="url('/static/tab-item-bg.png') 100% 100%" :scrollable="false" :list="statusList"
					:current="currentStatusIndex" @change="handleStatusChange"></uv-tabs>
			</view>
		</view>
		<scroll-view scroll-y="true" class="centent" :show-scrollbar="false" @scrolltolower='onbottom'>
			<view class="order-item bg-f radius-10" v-for="(item,index) in list" :key="index" @click="pageTo(item.id)">
				<view class="sn-and-status fs-24 flex-between">
					<view class="color-a">
						<view>{{item.createTime}}</view>
					</view>
					<!-- 待确认10 待排产20 待生产30 生产中40 待发货50 待收货61 待取货62 已收货 71已取货72 已完成90 -->
					<view style="color: #ff6a2f">{{getSname(item)}}</view>
				</view>
				<view style="display: flex;align-items: center;" class="customer-name fs-30 fw-700">
					{{item.batchNumber}}
					<view class="tts" v-if="item.priority == '1'">
						加急
					</view>
				</view>
				<block v-if="item.productList != null">
					<view class="product-info bg-f7 radius-10 flex--center">
						<view class="flex-1">
							<view class="product-name">{{item.productList[0].productName}}</view>
							<view class="fs-24 color-a">
								<text>叶片类型：</text>
								<text>{{item.productList[0].bladeType}}</text>
								<text class="square">驱动方式：</text>
								<text>{{(item.productList[0].driveMode)}}</text>
							</view>
						</view>
						<view class="fs-24">
							<text>x</text>
							<text>{{item.productList.length}}</text>
						</view>
					</view>
				</block>
			</view>
			<uni-load-more v-if="!list.length <= 0" :status="statusshow"></uni-load-more>
			<view class="nolist" v-if="nolist">
				暂无订单
			</view>
		</scroll-view>
		<confirm-popup v-if="show" :orderData="orderData" @childEvent="childEvent"
			@childEventClose="childEventClose"></confirm-popup>
	</view>
</template>

<script>
	import confirmPopup from '@/components/confirm-popup/confirm-popup.vue'
	export default {
		components: {
			confirmPopup
		},
		name: 'Customer',
		data() {
			return {
				show: false,
				orderData: {},
				ss: [{
					v: "10",
					n: "待分配"
				}, {
					v: "20",
					n: "待生产"
				}, {
					v: "30",
					n: "生产中"
				}, {
					v: "40",
					n: "已完成"
				}],
				statusList: [{
						stepStatus: '',
						name: '全部'
					},
					{
						stepStatus: '0',
						name: '未完成'
					},
					{
						stepStatus: '1',
						name: '已完成'
					}

				],
				list: [],
				currentStatusIndex: 0,
				total: 0,
				staffInfos: {
					userId: ''
				},
				nolist: false,
				params: {
					pageNum: 1,
					pageSize: 10,
					stepStatus: ''
				},
				statusshow: 'loading',
			}
		},
		computed: {
			getSname() {
				let num = uni.getStorageSync('staffInfo').productionProcess
				return (item) => {
					return item['stepStatus' + num] == 1 ? '已完成' : '未完成'
				}
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			childEventClose() {
				this.show = false
			},
			childEvent(e) {
				this.show = false
				this.params.pageNum = 1
				this.list = []
				this.getList()
			},
			pageTo(id) {
				uni.navigateTo({
					url: `/pages/orderinfo?id=${id}&type=1`
				})
			},
			over2(data) {
				this.show = true
				this.orderData = data
			},
			over(id, index) {
				uni.showModal({
					title: '温馨提示',
					content: '确认完成吗?',
					success: (res) => {
						if (res.confirm) {
							this.$api.makeOrder({
								id: id
							}).then(res => {
								uni.showToast({
									title: '操作成功',
									icon: 'none'
								})
								this.params.pageNum = 1
								this.list = []
								this.getList()
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getList() {
				this.statusshow = 'loading'
				this.$api.getBatchList(this.params).then(res => {
					this.list = [...this.list, ...res.rows]
					this.total = Math.ceil(res.total / this.params.pageSize);
					this.nolist = this.total == 0
					this.statusshow = 'no-more'
				})
			},
			onbottom() {
				this.params.pageNum++
				this.getList()
			},
			handleScan() {
				uni.scanCode({
					scanType: ['qrCode'],
					success: (res) => {
						console.log(res);
						if (res.scanType == "QR_CODE") {
							let batchNumber = res.result
							this.$api.getScan({
								batchNumber: batchNumber,
								pageNum: 1,
								pageSize: 10,
							}).then((result) => {
								console.log(result.data, 'result')
								if (result.data && result.data.id) {
									// uni.navigateTo({
									// 	url: `/pages/order-detail?id=${result.data.id}&type=1`
									// })
									uni.navigateTo({
										url: `/pages/orderinfo?id=${result.data.id}&type=1`
									})
								} else {
									uni.showToast({
										title: '订单不存在',
										icon: 'none'
									})
								}
							})
						} else {
							uni.showToast({
								title: '非法条码',
								icon: 'none'
							})
						}
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						})
					}
				});
			},
			handleStatusChange(event) {
				this.currentStatusIndex = event.index
				this.params.stepStatus = event.stepStatus
				this.params.pageNum = 1
				this.list = []
				this.getList()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.centent {
		margin: 0 auto;
		height: 55vh;
		overflow: auto;
	}

	.tts {
		width: 60rpx;
		height: 35rpx;
		background: #F51111;
		border-radius: 10rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 35rpx;
		text-align: center;
		margin-left: 10rpx;
	}

	.nolist {
		text-align: center;
		padding: 100rpx 30rpx;
		font-size: 28rpx;
		color: #666;
	}

	// 用户信息
	.staff-info-wrap {
		padding-left: 33rpx;
		padding-right: 41rpx;
		margin-left: 26rpx;
		margin-right: 26rpx;
		height: 160rpx;
		box-sizing: border-box;

		.staff-info-bg {
			filter: drop-shadow(0 0 2rpx #fff);
		}

		.staff-avatar {
			margin-right: 15rpx;
			width: 98rpx;
			height: 98rpx;
		}
	}

	// 头部扫码
	.scan-wrap {
		padding: 26rpx 36rpx 26rpx 31rpx;
		margin: 25rpx 26rpx 0 26rpx;
		height: 177rpx;
		box-sizing: border-box;

		.staff-icon {
			width: 140rpx;
			height: 140rpx;
		}
	}

	// 悬浮扫码
	.fixed-scan {
		position: fixed;
		right: 11rpx;
		top: 70%;
		width: 132rpx;
		height: 132rpx;
		background: linear-gradient(0deg, #ff3e19 0%, #ff6345 100%);
		box-shadow: 6rpx 11rpx 35rpx 0rpx rgba(255, 195, 183, 0.85);
		border-radius: 50%;

		.scan-icon {
			width: 45rpx;
			height: 45rpx;
		}
	}

	// status tab
	.status-tab-wrap {
		height: 100rpx;
		border-radius: 40rpx 40rpx 0 0;
		margin-top: 26rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;

		.tab-wrap {
			transform: translateY(4rpx);
		}
	}

	.order-item {
		padding: 0 19rpx 28rpx 18rpx;
		margin: 18rpx auto;
		width: 710rpx;
		box-sizing: border-box;
	}

	.sn-and-status {
		padding: 23rpx 0 16rpx;
		border-bottom: 2rpx solid #eee;
	}

	.customer-name {
		color: #151515;
		margin-top: 29rpx;
		margin-bottom: 24rpx;
	}

	.address-wrap {
		height: 68rpx;
		background: #fff0e8;
		color: #ff4c2a;

		.shou {
			margin-right: 8rpx;
			width: 30rpx;
			height: 30rpx;
			background: #ff4c2a;
			border-radius: 6rpx;
			font-weight: bold;
			font-size: 22rpx;
			color: #fff;
		}
	}

	.product-info {
		margin-top: 6rpx;
		padding: 20rpx 17rpx 17rpx 18rpx;
	}

	.product-name {
		margin-bottom: 17rpx;
	}

	.square {
		margin-left: 35rpx;
	}

	.total {
		margin-top: 39rpx;
	}

	.list-button {
		margin-top: 32rpx;
		width: 164rpx;
		height: 60rpx;
		box-sizing: border-box;
		border: 2rpx solid #ff4c2a;
		background: #ff4c2a;
		color: #fff;

		&.plain {
			background: transparent;
			color: #ff4c2a;
		}
	}
</style>